<template>
  <div class="order-detail">
    <el-button class="back-btn" type="primary" @click="back">返回</el-button>
    <el-tabs v-model="data.activeTab" class="demo-tabs tabs-back">
      <el-tab-pane label="基本信息" name="info">
        <div class="order-wrap detail-wrap">
          <el-steps
            :active="data.detailData.endTime ? 3 : 2"
            align-center
            process-status="wait"
          >
            <el-step
              title="准备充电"
              :description="
                data.detailData.startTime ? data.detailData.startTime : '--'
              "
            />
            <el-step
              title="开始充电"
              :description="
                data.detailData.startTime ? data.detailData.startTime : '--'
              "
            />
            <el-step
              title="结束充电"
              :description="
                data.detailData.endTime ? data.detailData.endTime : ''
              "
            />
            <el-step
              title="订单支付"
              :description="
                data.detailData.orderCloseTime
                  ? data.detailData.orderCloseTime
                  : ''
              "
            />
          </el-steps>
          <div class="order-reason">
            <div class="order-no">
              充电单号：{{
                data.detailData.startChargeSeq
                  ? data.detailData.startChargeSeq
                  : '--'
              }}
            </div>
            <div class="reason">
              订单结束原因：{{
                data.detailData.stopMsg ? data.detailData.stopMsg : '--'
              }}
            </div>
          </div>
          <div class="price-card">
            <div class="card-data left">
              <div class="card-data">
                <div class="card-item">
                  <div class="card-item-title">订单总金额</div>
                  <div class="card-value">
                    ￥{{
                      data.detailData.totalAmount
                        ? data.detailData.totalAmount
                        : '--'
                    }}
                  </div>
                </div>
                <div class="card-item">
                  <div class="card-item-title">订单总优惠</div>
                  <div class="card-value">
                    ￥{{
                      data.detailData.totalDiscounts
                        ? data.detailData.totalDiscounts
                        : '--'
                    }}
                  </div>
                </div>
                <div class="card-item card-item1">
                  <div class="content-title">
                    <div class="card-item-title">实收金额</div>
                    <div class="card-value card-value1">
                      ￥{{
                        data.detailData.actualAmount
                          ? data.detailData.actualAmount
                          : '--'
                      }}
                    </div>
                  </div>
                  <div class="fee">
                    <div class="electric-charge">
                      电费：￥{{
                        data.detailData.elecMoneyActual
                          ? data.detailData.elecMoneyActual
                          : '--'
                      }}
                    </div>
                    <div class="service-charge">
                      服务费：￥{{
                        data.detailData.serviceMoneyActual
                          ? data.detailData.serviceMoneyActual
                          : '--'
                      }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="order-info">
            <Detail
              :columns="2"
              :form="detailForm"
              :detail="data.detailData"
              align="right"
              class="order-detail"
            ></Detail>
          </div>
          <div class="edit-line"></div>
          <Head title="电桩实时数据最后一帧">
            <template #content>
              <div class="order-info">
                <Detail
                  :columns="2"
                  :form="detailForm2"
                  :detail="data.detailData"
                  align="right"
                ></Detail>
              </div>
            </template>
          </Head>
          <div class="edit-line"></div>
          <Head title="电桩上报交易数据">
            <template #content>
              <div class="order-info">
                <Detail
                  :columns="2"
                  :form="detailForm3"
                  :detail="data.detailData"
                  align="right"
                ></Detail>
              </div>
            </template>
          </Head>
          <div class="edit-line"></div>
          <Head title="结算处理">
            <template #content>
              <div class="order-tips">
                温馨提示：默认结算信息为估算建议值，请确认后再行保存！订单实收费用为平台在您录入的价格基础上计算本单该享受优惠后得出。
              </div>
              <div class="order-info">
                <Detail
                  :columns="2"
                  :form="detailForm4"
                  :detail="data.detailData"
                  align="right"
                ></Detail>
              </div>
              <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rules"
                label-width="90px"
              >
                <div style="width: 90%; padding: 0 60px" class="order-info">
                  <div style="width: calc(50% - 120px)">
                    <el-form-item label="充电电量" prop="totalPower">
                      <el-input
                        v-model.trim="ruleForm.totalPower"
                        placeholder="请输入充电电量"
                        @input="getSummmer"
                        clearable
                      >
                        <template #append>度</template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="订单电费" prop="totalElecMoney">
                      <el-input
                        v-model.trim="ruleForm.totalElecMoney"
                        placeholder="请输入订单电费"
                        @input="getSummmer"
                        clearable
                      >
                        <template #append>元</template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="处理备注" prop="abnormalRemark">
                      <el-input
                        v-model.trim="ruleForm.abnormalRemark"
                        placeholder="请输入处理备注"
                        maxlength="200"
                        type="textarea"
                        :rows="3"
                        @input="getSummmer"
                        clearable
                      />
                    </el-form-item>
                  </div>
                  <div style="width: calc(50% - 120px)">
                    <el-form-item label="充电时长" prop="chargedTime">
                      <el-input
                        v-model.trim="ruleForm.chargedTime"
                        placeholder="请输入充电时长"
                        @input="getSummmer"
                        clearable
                      >
                        <template #append>分</template>
                      </el-input>
                    </el-form-item>

                    <el-form-item label="订单服务费" prop="totalServiceMoney">
                      <el-input
                        v-model.trim="ruleForm.totalServiceMoney"
                        placeholder="请输入订单服务费"
                        @input="getSummmer"
                        clearable
                      >
                        <template #append>元</template>
                      </el-input>
                    </el-form-item>
                  </div>
                </div>
                <div class="order-info">
                  <Detail
                    :columns="2"
                    :form="detailForm5"
                    :detail="data.detailData"
                    align="right"
                  ></Detail>
                </div>
              </el-form>
            </template>
          </Head>
          <div class="edit-btn-wrap">
            <el-button type="primary" plain @click="back">取消</el-button>
            <el-button type="primary" v-btnAntiShake="onSubmit">保存</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="实时数据（列表）" name="tableData" v-if="env_type">
        <Table
          v-if="data.activeTab === 'tableData'"
          ref="tableDataRef"
          :columns="tableData.columns"
          @get-list="getList"
        ></Table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
     
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus';
import Head from '@/components/head/index.vue';
import Detail from '@/components/form/detail.vue';
import Table from '@/components/table/index.vue';
import { queryDicByParent } from '@/service/apis/api';
import {
  abnormalOrderSave,
  getAbnormalOrder,
  getAbnormalDiscount,
  getHistoryChargePageData,
} from '@/service/apis/order';
import { IS_DECIMAL_2, IS_DECIMAL_4, IS_INT_0 } from '@/utils/verify';
const router = useRouter();
const route = useRoute();
const ruleFormRef = ref<FormInstance>();
const {
  query: { id },
} = route;
const env_type = import.meta.env.VITE_ENV_TYPE !== 'ryc';
let data = reactive({
  activeTab: 'info',
  detailData: {} as any,
  discountsOrder: [] as any,
  startChargeSeq: '',
  columns: [
    {
      prop: 'timeFrame',
      label: '充电时段',
    },
    {
      prop: 'pricePower',
      label: '电费单价（元/度）',
    },
    {
      prop: 'priceService',
      label: '服务费单价（元/度）',
    },
    {
      prop: 'power',
      label: '充电度数（度）',
    },
    {
      prop: 'timeCost',
      label: '费用（元）',
    },
  ],
});
let tableData = reactive({
  columns: [
    {
      prop: 'dataTime',
      label: '上送时间',
    },
    {
      prop: 'totalPower',
      label: '充电度数（度）',
      template: (row: any) => {
        return row?.totalPower?.toString() || '--';
      },
    },
    {
      prop: 'chargedTime',
      label: '充电时长（分钟）',
      template: (row: any) => {
        return row?.chargedTime?.toString() || '--';
      },
    },
    {
      prop: 'soc',
      label: '当前SOC(%)',
      template: (row: any, index: number) => {
        return row?.soc?.toString() || '--';
      },
    },
    {
      prop: 'totalMoney',
      label: '已充金额（元）',
      template: (row: any, index: number) => {
        return row?.totalMoney?.toString() || '--';
      },
    },
    {
      prop: 'voltage',
      label: '电压（V）',
      template: (row: any, index: number) => {
        return row?.voltage?.toString() || '--';
      },
    },
    {
      prop: 'current',
      label: '电流（A）',
      template: (row: any, index: number) => {
        return row?.current?.toString() || '--';
      },
    },
    {
      prop: 'gunTemperature',
      label: '枪线温度（℃）',
      template: (row: any, index: number) => {
        return row?.gunTemperature?.toString() || '--';
      },
    },
    {
      prop: 'batteryTemperature',
      label: '电池温度（℃）',
      template: (row: any, index: number) => {
        return row?.batteryTemperature?.toString() || '--';
      },
    },
  ],
});

const detailForm = reactive([
  {
    label: '用户姓名',
    prop: 'userName',
    template: (row: any) => {
      return row?.userInfo?.userName ? row.userInfo.userName : '--';
    },
  },
  {
    label: '用户账号',
    prop: 'accountNumber',
    template: (row: any) => {
      return row?.userInfo?.accountNumber ? row.userInfo.accountNumber : '--';
    },
  },
  {
    label: '充电卡号',
    prop: 'cardNum',
    template: (row: any) => {
      return row?.userInfo?.cardNum ? row.userInfo.cardNum : '--';
    },
  },
  {
    label: '归属企业',
    prop: 'orgName',
    template: (row: any) => {
      return row?.userInfo?.orgName ? row?.userInfo?.orgName : '--';
    },
  },
  {
    label: '充电车辆',
    prop: 'plateNumber',
    template: (row: any) => {
      return row?.userInfo?.plateNumber ? row.userInfo.plateNumber : '--';
    },
  },
  {
    label: '车辆VIN码',
    prop: 'chargeVin',
    // template: (row: any) => {
    //   return row?.userInfo?.chargeVin || '--';
    // },
  },
  {
    label: '流量方流水号',
    prop: 'flowStartChargeSeq',
  },
  {
    label: '运营商流水号',
    prop: 'operatorSerialNumber',
  },
  {
    label: '终端编码',
    prop: 'connectorCode',
    template: (row: any) => {
      return row?.connectorInfo?.connectorCode
        ? row.connectorInfo.connectorCode
        : '--';
    },
  },
  {
    label: '电桩功率',
    prop: 'power',
    template: (row: any) => {
      return row?.connectorInfo?.power ? `${row.connectorInfo.power}kW` : '--';
    },
  },
  {
    label: '电站名称',
    prop: 'stationName',
    template: (row: any) => {
      return row?.connectorInfo?.stationName
        ? row.connectorInfo.stationName
        : '--';
    },
  },
  {
    label: '运营商',
    prop: 'operatorName',
    template: (row: any) => {
      return row?.connectorInfo?.operatorName
        ? row.connectorInfo.operatorName
        : '--';
    },
  },
]);

const detailForm2 = reactive([
  {
    label: '上送时间',
    prop: 'dataTime',
    template: (row: any) => {
      return row?.chargeDataDTO?.dataTime ? row.chargeDataDTO.dataTime : '--';
    },
  },
  {
    label: 'SOC',
    prop: 'soc',
    template: (row: any, index: number) => {
      return row?.chargeDataDTO?.soc?.toString()
        ? `${row?.chargeDataDTO?.soc?.toString()}%`
        : '--';
    },
  },
  {
    label: '电量',
    prop: 'totalPower',
    template: (row: any) => {
      return row?.chargeDataDTO?.totalPower?.toString()
        ? `${row?.chargeDataDTO?.totalPower?.toString()}度`
        : '--';
    },
  },
  {
    label: '已充时间',
    prop: 'marketChargedTime',
    template: (row: any) => {
      if (row.marketChargedTime || row.marketChargedTime == 0) {
        return row.marketChargedTime.toString()
          ? `${row?.marketChargedTime?.toString()}分钟`
          : '--';
      } else {
        return '--';
      }
    },
  },
  {
    label: '充电状态',
    prop: 'charging',
    template: (row: any) => {
      return row?.chargeDataDTO?.charging ? '充电中' : '未充电';
    },
  },
]);

const detailForm3 = reactive([
  {
    label: '充电时长',
    template: (row: any) => {
      return row?.marketChargedTime?.toString()
        ? `${row?.marketChargedTime?.toString()}分钟`
        : '--';
    },
  },
  {
    label: '',
    template: (row: any) => {
      return '';
    },
  },
  {
    label: '充电电量',
    prop: 'totalPower',
    template: (row: any) => {
      return row?.tradeDataDTO?.totalPower?.toString()
        ? `${row?.tradeDataDTO?.totalPower?.toString()}度`
        : '--';
    },
  },
  {
    label: '',
    template: (row: any) => {
      return '';
    },
  },
  {
    label: '实付金额',
    prop: 'totalMoney',
    template: (row: any) => {
      return row?.tradeDataDTO?.totalMoney?.toString()
        ? `${row?.tradeDataDTO?.totalMoney?.toString()}元`
        : '--';
    },
  },
]);

const detailForm4 = reactive([
  {
    label: '异常原因',
    prop: 'abnormalCause',
    dic: [] as any,
    type: Number,
  },
  {
    label: '本单冻结金额',
    prop: 'orderFreezeAmount',
    template: (row: any) => {
      return row?.orderFreezeAmount?.toString()
        ? `${row?.orderFreezeAmount?.toString()}元`
        : '--';
    },
  },
  {
    label: '本单关联活动',
    prop: 'activityList',
  },
]);

const detailForm5 = reactive([
  {
    label: '实收电费',
    prop: 'elecMoneyActual',
    template: (row: any) => {
      return row?.elecMoneyActual?.toString()
        ? `${row?.elecMoneyActual?.toString()}元`
        : '--';
    },
  },
  {
    label: '实收服务费',
    prop: 'serviceMoneyActual',
    template: (row: any) => {
      return row?.serviceMoneyActual?.toString()
        ? `${row?.serviceMoneyActual?.toString()}元`
        : '--';
    },
  },
]);

let ruleForm = reactive({
  abnormalRemark: '',
  totalServiceMoney: '',
  totalElecMoney: '',
  chargedTime: '',
  totalPower: '',
});

const formData = reactive({
  orderId: '',
  connectorInfo: {} as any,
  userInfo: {} as any,
  startChargeSeq: '',
  chargedTime: '',
  totalElecMoney: '',
  totalServiceMoney: '',
  totalPower: '',
  startTime: '',
  activitiesId: '',
});

const checkTotalPower = (rule: any, value: any, callback: any) => {
  console.log(value);
  if (value > 800) {
    callback(new Error('充电电量不可大于800'));
  }
  callback();
};

const checkTime = (rule: any, value: any, callback: any) => {
  console.log(value);
  if (value > 2160) {
    callback(new Error('充电时长不可大于36小时'));
  }
  callback();
};

const checkElecMoney = (rule: any, value: any, callback: any) => {
  console.log(value);
  if (value > 1000) {
    callback(new Error('订单电费不可大于1000'));
  }
  callback();
};

const checkServiceMoney = (rule: any, value: any, callback: any) => {
  console.log(value);
  if (value > 1000) {
    callback(new Error('订单服务费不可大于1000'));
  }
  callback();
};

const rules = reactive<FormRules>({
  totalPower: [
    { required: true, message: '请输入充电电量', trigger: 'blur' },
    {
      pattern: IS_DECIMAL_4,
      message: '请输入正确的充电电量，精确到4位小数',
      trigger: 'blur',
    },
    { validator: checkTotalPower, trigger: 'blur' },
  ],
  chargedTime: [
    { required: true, message: '请输入充电时长', trigger: 'blur' },
    {
      pattern: IS_INT_0,
      message: '请输入正确的充电时长',
      trigger: ['blur', 'change'],
    },
    { validator: checkTime, trigger: ['blur', 'change'] },
  ],
  totalElecMoney: [
    { required: true, message: '请输入订单电费', trigger: 'blur' },
    {
      pattern: IS_DECIMAL_2,
      message: '请输入正确的订单电费，精确到2位小数',
      trigger: ['blur', 'change'],
    },
    { validator: checkElecMoney, trigger: ['blur', 'change'] },
  ],
  totalServiceMoney: [
    { required: true, message: '请输入订单服务费', trigger: 'blur' },
    {
      pattern: IS_DECIMAL_2,
      message: '请输入正确的订单服务费，精确到2位小数',
      trigger: ['blur', 'change'],
    },
    { validator: checkServiceMoney, trigger: ['blur', 'change'] },
  ],
  abnormalRemark: [
    { required: true, message: '请输入处理备注', trigger: 'blur' },
  ],
});

// 获取异常订单详情
getAbnormalOrder(Number(id)).then((res: any) => {
  if (res) {
    data.detailData = res;
    ruleForm.abnormalRemark = res.abnormalRemark;
    ruleForm.totalServiceMoney = res.totalServiceMoney;
    ruleForm.totalElecMoney = res.totalElecMoney;
    ruleForm.chargedTime = res.chargedTime;
    ruleForm.totalPower = res.totalPower;
    data.startChargeSeq = res.startChargeSeq;
  }
});

// 字典
queryDicByParent({ listDtos: ['abnormalBasic'] }).then((res: any) => {
  if (res) {
    detailForm4[0].dic = res.abnormalBasic;
  }
});

// 获取实收电费和实收服务费的计算
const emit = defineEmits(['clear-cache']);
const getSummmer = async () => {
  formData.orderId = data.detailData.orderId;
  formData.connectorInfo = data.detailData.connectorInfo;
  formData.userInfo = data.detailData.userInfo;
  formData.startChargeSeq = data.detailData.startChargeSeq;
  formData.startTime = data.detailData.startTime;
  formData.chargedTime = ruleForm.chargedTime;
  formData.totalElecMoney = ruleForm.totalElecMoney;
  formData.totalServiceMoney = ruleForm.totalServiceMoney;
  formData.totalPower = ruleForm.totalPower;
  formData.activitiesId = data.detailData.activitiesId;
  if (!ruleFormRef.value) return;
  try {
    await Promise.all([ruleFormRef.value.validate()]);
  } catch (fields: any) {
    for (const key in ruleForm) {
      if (fields[key]) {
        ruleFormRef.value.scrollToField(key);
        break;
      }
    }
    return;
  }
  if (
    String(formData.totalPower) &&
    !Number.isNaN(Number(formData.totalPower)) &&
    String(formData.chargedTime) &&
    !Number.isNaN(Number(formData.chargedTime)) &&
    String(formData.totalElecMoney) &&
    !Number.isNaN(Number(formData.totalElecMoney)) &&
    String(formData.totalServiceMoney) &&
    !Number.isNaN(Number(formData.totalServiceMoney))
  ) {
    getAbnormalDiscount(formData).then((res: any) => {
      if (res) {
        // emit('clear-cache');
        data.detailData.elecMoneyActual = res.elecMoneyActual;
        data.detailData.serviceMoneyActual = res.serviceMoneyActual;
        data.detailData.totalAmount = res.totalAmount;
        data.detailData.totalDiscounts = res.totalDiscounts;
        data.detailData.actualAmount = res.actualAmount;
      }
    });
  }
};
// 处理异常数据
const onSubmit = async () => {
  if (!ruleFormRef.value) return;
  try {
    await Promise.all([ruleFormRef.value.validate()]);
  } catch (fields: any) {
    for (const key in ruleForm) {
      if (fields[key]) {
        ruleFormRef.value.scrollToField(key);
        break;
      }
    }
    return;
  }
  console.log(data.detailData);
  if (data.detailData?.chargeDataDTO || data.detailData?.tradeDataDTO) {
    if (data.detailData.tradeDataDTO && data.detailData.tradeDataDTO.endTime) {
      data.detailData.endTime = data.detailData.tradeDataDTO.endTime;
    } else if (
      data.detailData.chargeDataDTO &&
      data.detailData.chargeDataDTO.dataTime
    ) {
      data.detailData.endTime = data.detailData.chargeDataDTO.dataTime;
    }
    delete data.detailData?.chargeDataDTO;
    delete data.detailData?.tradeDataDTO;
  }
  console.log('==========', data.detailData);

  let formData = Object.assign(data.detailData, ruleForm);
  console.log(formData);

  abnormalOrderSave(formData).then((res: any) => {
    emit('clear-cache');
    back();
  });
};

// 获取实时数据
let tableDataRef = ref();
const getList = (page: any) => {
  getHistoryChargePageData(data.startChargeSeq, page).then((res: any) => {
    if (res) {
      console.log('res---', res);
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getList(page);
        return;
      }
      nextTick(() => {
        const arr = res.dataList || [];
        tableDataRef.value?.setTable({
          total: res.totalCount,
          table: [...arr],
        });
      });
    }
  });
};

const back = () => {
  router.go(-1);
};
</script>
<style lang="scss">
.order-detail {
  position: relative;
  .back-btn {
    position: absolute;
    right: 20px;
    top: 6px;
    z-index: 10;
  }
}
.order-wrap {
  margin-top: 20px;
  .el-form-item__content {
    display: flex;
    flex-wrap: nowrap;
  }

  .order-reason {
    display: flex;
    justify-content: space-around;
    font-weight: 500;
    font-size: 16px;
    color: #5073f7;
    width: 100%;
    margin-top: 20px;
    // padding: 0 100px;
    .order-no {
      width: 50%;
    }
  }

  .price-card {
    margin-top: 20px;
    width: 100%;
    height: 119px;
    // opacity: 0.36;
    // &::after {
    // background: linear-gradient(98.09deg, #6BA4FE 0%, #436DFF 73.83%);
    background: linear-gradient(
      98.09deg,
      rgba(107, 164, 254, 0.36) 0%,
      rgba(67, 109, 255, 0.36) 73.83%
    );
    // opacity: 0.36;
    // }
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      width: calc(100% - 128px);
      .card-data {
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: #ffff;
        align-items: center;
        .card-item {
          text-align: center;
          .iconfont {
            font-size: 36px;
            line-height: 36px;
          }
          .card-item-title {
            margin-top: 2px;
            color: #555555;
            font-weight: 400;
            font-size: 15px;
            line-height: 23px;
          }
          .card-value {
            margin-top: 8px;
            font-weight: 700;
            font-size: 36px;
            line-height: 44px;
            color: #5073f7;
          }
          .card-value1 {
            color: #292d32;
            display: flex;
            align-items: center;
          }
        }
        .card-item1 {
          display: flex;
          align-items: flex-end;
          .fee {
            font-weight: 700;
            font-size: 12px;
            line-height: 16px;
            margin-left: 10px;
            margin-bottom: 6px;
            color: #5073f7;
          }
        }
      }
    }
    .right {
      width: 128px;
      height: 118px;
      background-image: url(@/assets/images/order-wallet.png);
      background-repeat: no-repeat;
      background-size: cover;
      margin-top: 26px;
    }
  }

  .order-info {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    .order-detail {
      margin-top: 20px;
    }
  }
  // .order-table {
  //   .el-table--fit.el-table--enable-row-hover.el-table--enable-row-transition.has-footer.el-table.el-table--layout-fixed.is-scrolling-none{
  //     border: 1px solid #D4DBF5;
  //     border-radius: 0;
  //   }
  // }

  .discount-info {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    .discount-deduction-card {
      width: 45%;
      .card-top {
        height: 15px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }
      .card-top1 {
        background-color: #fa3939;
      }
      .card-top2 {
        background-color: #5073f7;
      }
      .card-top3 {
        background-color: #ffc700;
      }
      .card-top4 {
        background-color: #9859ff;
      }
      .card-content {
        height: 140px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        .card-title {
          font-size: 13px;
          line-height: 22px;
          padding: 6px 0 0 15px;
        }
        .contont-value {
          display: flex;
          justify-content: space-around;
          .fee {
            margin-top: 15px;
            text-align: center;
            .fee-title {
              font-size: 12px;
              line-height: 18px;
              color: #262626;
            }
            .money {
              font-weight: 700;
              font-size: 16px;
              line-height: 22px;
              // color: #5073F7;
            }
          }
        }
        .line1 {
          margin-top: 25px;
          border-top: 2px dashed rgba(250, 57, 57, 0.3);
        }
        .line2 {
          margin-top: 25px;
          border-top: 2px dashed rgba(80, 115, 247, 0.3);
        }
        .line3 {
          margin-top: 25px;
          border-top: 2px dashed #ffc700;
        }
        .line4 {
          margin-top: 25px;
          border-top: 2px dashed rgba(152, 89, 255, 0.3);
        }
        .circular1 {
          width: 16px;
          height: 16px;
          border-radius: 8px;
          background-color: #fff;
          margin-top: -8px;
          margin-left: -8px;
        }
        .circular2 {
          width: 16px;
          height: 16px;
          border-radius: 8px;
          background-color: #fff;
          margin-top: -16px;
          margin-left: calc(100% - 8px);
        }
        .bottom-card {
          margin-top: -3px;
          margin-left: 12px;
          font-size: 11px;
          line-height: 22px;
          color: #555555;
        }
      }

      .card-content1 {
        background-color: rgba(254, 235, 235, 1);
        .money {
          color: #fa3939;
        }
      }
      .card-content2 {
        background-color: rgba(237, 241, 254, 1);
        .money {
          color: #5073f7;
        }
      }
      .card-content3 {
        background-color: rgba(255, 251, 235, 1);
        .money {
          color: #ffc700;
        }
      }
      .card-content4 {
        background-color: rgba(152, 89, 255, 0.1);
        .money {
          color: #9859ff;
        }
      }
    }
  }
}
.order-tips {
  margin: 12px;
  font-size: 10px;
  line-height: 16px;
  color: var(--el-color-primary);
}
</style>
